<!doctype html>
<html lang="zh-CN">
<head>
    <meta charset="utf-8">
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>异清轩博客</title>
    <script src="js/vue.min.js"></script>
    <script src="js/axios.min.js"></script>
    <link href="js/ele-2.15.7/theme-chalk/index.css" rel="stylesheet">
    <!-- 引入组件库 -->
    <script src="js/ele-2.15.7/index.js"></script>

    <link rel="stylesheet" type="text/css" href="css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="css/nprogress.css">
    <link rel="stylesheet" type="text/css" href="css/style.css">
    <link rel="stylesheet" type="text/css" href="css/font-awesome.min.css">
    <link rel="apple-touch-icon-precomposed" href="images/icon/icon.png">
    <link rel="shortcut icon" href="images/icon/favicon.ico">
    <script src="js/jquery-2.1.4.min.js"></script>
    <script src="js/nprogress.js"></script>
    <script src="js/jquery.lazyload.min.js"></script>

    <script src="../../../../../login-starter/src/main/resources/static/js/login.js"></script>
    <script src="js/blog.js"></script>

<body class="user-select">
<div id="app">
    <mymain ref="mym" @category="getCategory" @logined="onlogin">
        <el-form ref="form" :model="article" label-width="80px">
            <el-form-item label="作者">
                <el-input v-model="article.author" editable="false" :disabled="true" style="width: 300px"></el-input>
                <span class="msg">{{errors.author}}</span>
            </el-form-item>
            <el-form-item label="标题">
                <el-input v-model="article.title"  style="width: 300px"></el-input>
                <span class="msg">{{errors.title}}</span>
            </el-form-item>
            <el-form-item label="栏目">
            <el-select v-model="value" placeholder="请选择">
                <el-option
                        v-for="item in options"
                        :key="item.id"
                        :label="item.name"
                        :value="item.id">
                </el-option>
            </el-select>
            </el-form-item>

            <el-form-item label="封面">
                <el-upload
                        style="width: 300px ;
                        display:inline-block"
                        class="avatar-uploader"
                        action="upload?webPath=img"
                        :show-file-list="false"
                        :on-success="handleAvatarSuccess"
                        :before-upload="beforeAvatarUpload">
                    <img v-if="article.titleImgs" :src="article.titleImgs" class="avatar">
                    <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <span class="msg">{{errors.titleImgs}}</span>
            </el-form-item>
            <el-form-item label="内容">
<!--                <el-input type="textarea" v-model="article.content" style="width: 300px"></el-input>-->
                <span class="msg">{{errors.content}}</span>
                <script id="container" name="content" type="text/plain">
                    这里写你的初始化内容
                </script>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">发布</el-button>
                <el-button>取消</el-button>
            </el-form-item>
        </el-form>
    </mymain>

</div>

<script src="js/ueditor-1.4.3.3/ueditor.config.js"></script>
<script src="js/ueditor-1.4.3.3/editor_api.js"></script>


<script type="text/javascript">
    var ue = UE.getEditor('container');
</script>

<script>
    var v = new Vue({
        el: "#app",
        data: {
            article: {author:"",title:"",titleImgs:"",content:""},
            errors:{},
            options:{},
            value: '技术文章3',
        },
        methods: {
            onSubmit(){
                this.article.content = ue.getContent();
                axios.post("/blog/article/save",this.article).then(res=>{
                    if (res.data.code){
                        this.$message(res.data.msg);
                    }else {
                        //this.$alert(res.data.msg);
                        console.info(res.data.data);
                        this.errors = {};
                        for (let name in this.article){
                            let errMsg = res.data.data
                                .filter(err => err.field == name)  //过滤
                                .map(err => err.defaultMessage)    //转换：{..}  =》String
                                .join(",");
                            this.errors[name] = errMsg;
                        }
                    }
                })
            },
            onlogin(user){
                this.article.author = user.name;
                this.$forceUpdate();
            },
            handleAvatarSuccess(res, file) {
                //res 不是 axios 的res , 相对axios的res.data
                //res.data ==> webPath
                //res.code ==> 1 or 0
                if (res.code){
                    this.article.titleImgs = res.data;
                    this.$forceUpdate();
                }else {
                    this.$alert(res.msg);
                }
            },
            beforeAvatarUpload(file) {
                const isJPG = file.type.indexOf('image') == 0;
                const isLt2M = file.size / 1024 / 1024 < 2;

                if (!isJPG) {
                    this.$message.error('上传头像图片只能是图片    格式!');
                }
                if (!isLt2M) {
                    this.$message.error('上传头像图片大小不能超过 2MB!');
                }
                return isJPG && isLt2M;
            },
            getCategory(category){
                this.options = category;
                console.log(this.options);
            }
        },
        created(){
            this.getCategory();
        }
    });
</script>

<style>
    .avatar-uploader .el-upload {
        border: 1px dashed #d9d9d9;
        border-radius: 6px;
        cursor: pointer;
        position: relative;
        overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
        border-color: #409EFF;
    }
    .avatar-uploader-icon {
        font-size: 28px;
        color: #8c939d;
        width: 178px;
        height: 178px;
        line-height: 178px;
        text-align: center;
    }
    .avatar {
        /*width: 178px;*/
        height: 178px;
        display: block;
    }

    input[type=file] {
        display: none;
    }

    .msg{
        color: red;
    }
</style>

<script src="js/bootstrap.min.js"></script>
<script src="js/jquery.ias.js"></script>
<script src="js/scripts.js"></script>
</body>
</html>